    <!DOCTYPE html>
    <html>
    <head>
        <meta content="@author @ken @1039110278"/>
        <meta content="转载请注明"/>
        <meta charset="utf-8"/>

        <title>留言墙测试</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body{
                background: -webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
                background: -moz-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
                font-family: '微软雅黑', sans-serif;
                font-size: 16px;
                position: relative;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
            }
            .item {
                width: 200px;
                height: 200px;
                margin: 0;
                position: absolute;
                left: 300px;
                top: 200px;
                cursor: pointer;
                background-color: #9c5be7;
                -webkit-border-bottom-left-radius: 20px 500px;
                -webkit-border-bottom-right-radius: 500px 30px;
                -webkit-border-top-right-radius: 5px 100px;
                box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
                -webkit-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
                -moz-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
            }
            #container{
                height: 1000px;
                position: relative;
                overflow: hidden;
            }

            #container p{
                height: 80px;
                margin: 30px 10px;
                overflow: hidden;
                word-wrap: break-word;
                line-height: 1.5;
            }
            #container a{
                text-decoration: none;
                position: relative;
                left: 150px;
                color: red;
                font-size: 14px;
                cursor: all-scroll;
            }
            .bigbox1 div:before{
                position: absolute;
               display: block;
               content: "";
                left: 77px;
                top: -11px;
                width: 30px;
                height: 25px;
                background-color: #efe28f;
               opacity: 0.5;
            }
            .bigbox1{
                position: relative;
                margin: auto;
                width: 800px;
                height: 700px;
                opacity: 0.6;
                /*background: -webkit-linear-gradient(red, blue); !* Safari 5.1 - 6.0 *!*/
                background: rgba(100,100,100,0.5); /* Safari 5.1 - 6.0  改变透明度的(255,255,255,0.5)为白色半透明*/
            }

        </style>
    </head>
    <body>
    <div id="container" >
      <div class="bigbox1">
        <div class="item">
            <p>我以我心向明月，奈何明月照沟渠</p>
            <a class="close">关闭</a>
        </div>
      </div>
    </div>
    <script>
        var index=0;

  for(var i=0;i<=7;i++){
        var container=document.getElementById("container");
        console.log(container);
        var bigBox=container.getElementsByClassName("bigbox1")[0];
        var tip=bigBox.getElementsByClassName("item")[0];//千万不要忘记加[0]不然得到的是一个数组


        var newTip=tip.cloneNode(true);//克隆一个div这个div是一个基础div
        newTip.id=tip.id+1;//这个有点模糊
        var topValue=parseInt(Math.random()*400);
        var leftValue=parseInt(Math.random()*700);
        newTip.style.top=topValue+"px";//不加英文双引号就是变量的意思所以加上，原来单位也只是一个修饰符类型啊
        newTip.style.left=leftValue+"px";
        bigBox.appendChild(newTip);
        //触发改变层级使点击到的都获得高层级，首先var 一个index为0
        newTip.onclick=function () {
            this.style.zIndex=index;
            index++;
        }
         var closeDiv=newTip.getElementsByClassName("close")[0];//因为你是复制过来的不是直接添加进去的而且复制的本体已经自毁了，所以看到的只是一些复制体所以用newTip
             closeDiv.onclick = function() {

                  bigBox.removeChild(this.parentNode);
                  console.log(this.parentNode);
              }
          }
          newTip.parentNode.removeChild(tip);//将第一个盒子自杀
        //点击关闭盒子


    </script>
    </body>
    </html>